<template>

    <div class="tabFooterBox flexCenterBetween">
        <div class="tabLevel2Box flexCenterBetween" v-show="level2Symbol == tabCode.policeForces">
            <div class="w-100">
                <div class="flexCenterBetween">
                    <div>轨迹回放</div>
                    <a-icon type="close" @click="coloseTrackPlayObj()"/>
                </div>
                <div class="flexCenterBetween w-100">
                    <div>
                        <img :src="require('../../assets/img/player/stop.png')" alt="" @click="pauseTrack()"
                             v-if="timeLineInfor.status == 1">
                        <img :src="require('../../assets/img/player/doPlay.png')" alt="" @click="playTrack()" v-else>
                    </div>
                    <div class="ml-10">
                        {{formatTime(timeLineInfor.start)}}
                    </div>
                    <a-slider :tip-formatter="null" class="w-100 m-10" :step="1" :min="timeLineInfor.start"
                              :max="timeLineInfor.end" :value="timeLineInfor.current"/>
                    <div class="">
                        {{formatTime(timeLineInfor.end)}}
                    </div>

                </div>

            </div>
            <div style="height:50px" class="gradientLine1px mx-10"></div>
            <div class=" flex-no-zoom" style="width: 200px">
                <div class="flexCenterBetween">
                    <img :src="require('../../assets/img/player/slow.png')" alt="" class="mr-6">
                    <div class="w-100">
                        <a-slider :step="50" :min="10" :max="160" class=" m-6" :tip-formatter="null"
                                  v-model="timeInterval" @change="timeIntervalChange()"/>
                        <div class="w-100 flexBetween px-6" style="margin-top:-10px;">
                            <div style="height:12px;border-right:2px solid #244f84;"></div>
                            <div style="height:12px;border-right:2px solid #244f84;"></div>
                            <div style="height:12px;border-right:2px solid #244f84;"></div>
                            <div style="height:12px;border-right:2px solid #244f84;"></div>
                        </div>


                    </div>
                    <img :src="require('../../assets/img/player/fast.png')" alt="">
                </div>
                <div class="flexCenterBetween px-14">


                    <div>0.5</div>
                    <div>1.0</div>
                    <div>1.5</div>
                    <div>2.0</div>

                </div>
            </div>
        </div>


        <div class="tabLevel2Box" v-show="equipment.level2Symbol == level2Symbol">
            <div class="flexBetween">
                <a-checkbox :indeterminate="equipment.indeterminate" :checked="equipment.checkAll"
                            @change="onCheckAllChange(equipment,equipmentTabs,3)">
                    全部
                </a-checkbox>
                <a-icon type="close" @click="level2Symbol = null"/>
            </div>
            <div class="mt-6 flexBetween">
                <a-checkbox @change="onLevel2Change(item,equipment,equipmentTabs,3)"
                            v-for="(item,index) in equipmentTabs" :key="index"
                            :checked="item.active">
                    {{item.title}}
                </a-checkbox>
            </div>
        </div>

        <div class="tabLevel2Box" v-show="hiddenDanger.level2Symbol == level2Symbol">
            <div class="flexBetween">
                <a-checkbox :indeterminate="hiddenDanger.indeterminate" :checked="hiddenDanger.checkAll"
                            @change="onCheckAllChange(hiddenDanger,hiddenDangerTabs,8)">
                    全部
                </a-checkbox>
                <a-icon type="close" @click="level2Symbol = null"/>
            </div>
            <div class="mt-6">
                <a-checkbox class="mr-10" @change="onLevel2Change(item,hiddenDanger,hiddenDangerTabs,8)"
                            v-for="(item,index) in hiddenDangerTabs" :key="index"
                            :checked="item.active">
                    {{item.title}}
                </a-checkbox>
            </div>
        </div>


        <div style="width:80px;height:101px;position:relative;text-align: center;cursor:pointer"
             v-for="(tab,i) in tabs" :key="i"
             @click="tabSwitch(tab)">
            <span style="color: #78E0FB">{{tab.title}}</span>

            <img :src="require('../../assets/img/expresswayMapMode/halo.png')" alt="" class="haloSelecedImg"
                 v-if="tab.active">

            <div style="width:50px;height:72px;display:flex;align-items:flex-end;margin:0 auto;position:relative">
                <img :src="require('../../assets/img/expresswayMapMode/default/'+tab.imgName)"
                     class="img-fluid" alt="" v-if="!(tab.active)">
                <img :src="require('../../assets/img/expresswayMapMode/select/'+tab.imgName)"
                     class="img-fluid" alt="" v-else>
            </div>


        </div>
    </div>
</template>

<script>

    import {tabCode} from "../../common/data/sys-data";
    import PoliceInforDetail from "@/components/mapInfoDetail/policeInforDetail.vue";
    import TrafficSituationDetail from "@/components/mapInfoDetail/trafficSituationDetail.vue";
    import TollGateDetail from "@/components/mapInfoDetail/tollGateDetail.vue";
    import PoliceStrengthDetail from "@/components/mapInfoDetail/policeStrengthDetail.vue";
    import Vue from 'vue'
    import {getPoliceTrack} from "../../common/api";

    var trackPlayMonitor, trackPlayObj;

    function BuildTab(title, imgName, code, drawType, showDetail = () => {
    }) {
        this.title = title;
        this.imgName = imgName;
        this.active = false;
        this.code = code;
        this.drawType = drawType; //0点 1线
        this.mapDraws = [];
        this.center = null;
        this.showDetail = showDetail
    }

    export default {
        name: "expressway-tabs",
        props: {index: {default: 0}, mapApp: {default: null}},
        components: [
            PoliceInforDetail,
            TrafficSituationDetail,
            TollGateDetail,
            PoliceStrengthDetail,
        ],
        data() {
            const tabs = [
                new BuildTab("路况", "roadConditions.png", tabCode.roadConditions, 1, this.showTrafficSituationDetail), // 0点 1线
                new BuildTab("事故", "accident.png", tabCode.accident, 0, this.showAccidentDetail), // 0点 1线
                new BuildTab("警力", "policeForces.png", tabCode.policeForces, 0, this.showStrengthDetail), // 0点 1线
                new BuildTab("设备", "equipment.png", tabCode.equipment, 0), // 0点 1线
                new BuildTab("施工", "construction.png", tabCode.construction, 1), // 0点 1线
                new BuildTab("视频", "video.png", tabCode.video, 0), // 0点 1线
                new BuildTab("收费站", "tollStation.png", tabCode.bayonet, 0, this.showTollGateDetail), // 0点 1线
                new BuildTab("服务区", "serviceArea.png", tabCode.serviceArea, 0), // 0点 1线
                new BuildTab("隐患", "hiddenDanger.png", tabCode.hiddenDanger, 0), // 0点 1线
                new BuildTab("安全预警", "safetyWarning.png", tabCode.safetyWarning, 1), // 0点 1线
            ];
            const equipmentTabs = [
                new BuildTab("卡口", "tollStation.png", tabCode.tollStation, 0), // 0点 1线
                new BuildTab("雾区检测器", "fogDetection.png", tabCode.fogDetection, 0), // 0点 1线
                new BuildTab("雾区防撞", "fogCollision.png", tabCode.fogCollision, 0), // 0点 1线
                new BuildTab("气象检测器", "meteorologicalDetection.png", tabCode.meteorologicalDetection, 0), // 0点 1线
                new BuildTab("诱导屏", "guidanceScreen.png", tabCode.guidanceScreen, 0), // 0点 1线
                new BuildTab("喊话设备", "shouting.png", tabCode.shouting, 0), // 0点 1线
            ];
            const hiddenDangerTabs = [
                new BuildTab("易滑路段", "slipperySection.png", tabCode.slipperySection, 1), // 0点 1线
                new BuildTab("长下坡", "LongDownhill.png", tabCode.longDownhill, 1), // 0点 1线
                new BuildTab("事故黑点", "accidentBlackSpot.png", tabCode.accidentBlackSpot, 1), // 0点 1线
            ];
            return {
                tabs: tabs,
                equipmentTabs: equipmentTabs,
                hiddenDangerTabs: hiddenDangerTabs,
                activeCode: 0,
                tabCode: tabCode,


                level2Symbol: null,
                equipment: {
                    indeterminate: false,
                    checkAll: false,
                    level2Symbol: tabCode.equipment
                },

                hiddenDanger: {
                    indeterminate: false,
                    checkAll: false,
                    level2Symbol: tabCode.hiddenDanger
                },

                trackPlayMonitor: null,
                trackPlayObj: null,


                timeInterval: 60,
                timeLineInfor: {
                    start: 0,
                    end: 0,
                    current: 0,
                    status: 0, // 0未开始  1开始  2暂停
                    data: []
                },

            }
        },
        computed: {
            // equipmentActive(){
            //     // return this.checkAll||this.indeterminate
            // }

        },
        methods: {
            formatTime(allSeconds) {
                const seconds = Math.floor(allSeconds % 60);
                let minutes = 0;
                let hours = 0;

                if (allSeconds > 60) {
                    minutes = Math.floor(allSeconds / 60);
                    if (minutes > 60) {
                        hours = Math.floor(minutes / 60);
                        minutes = Math.floor(minutes % 60);
                    }
                }
                return hours + ":" + minutes + ":" + seconds;
            },
            timeIntervalChange() {
                console.log(this.timeInterval);
                if (trackPlayObj) {
                    trackPlayObj.resetTimeInterval(180-this.timeInterval);
                }
            },
            tabSwitch(tab) {
                if (tab.code === tabCode.equipment || tab.code === tabCode.hiddenDanger) {
                    if (tab.code === this.level2Symbol) {
                        this.level2Symbol = null
                    } else {
                        this.level2Symbol = tab.code
                    }
                    return;
                }

                tab.active = !tab.active;
                // this.activeCode = tab.code;
                this.$emit('switch', tab);
                this.$forceUpdate();
            },
            tabSwitchByCode(code) {
                const tabN = this.tabs.find(v => {
                    return v.code === code;
                })

                if (tabN.active) {
                    this.$emit('toCenter', tabN.center);
                } else {
                    tabN.active = true;
                    this.$emit('switch', tabN);
                    this.$forceUpdate();
                }

            },
            onLevel2Change(tabLevel2Item, tabCtrl, tabs, index) {
                console.log("onLevel2Change", tabLevel2Item)
                tabLevel2Item.active = !tabLevel2Item.active;

                const activeTabs = tabs.filter(v => {
                    return v.active;
                })
                if (activeTabs.length == 0) {
                    tabCtrl.indeterminate = false;
                    tabCtrl.checkAll = false;
                } else if (activeTabs.length == tabs.length) {
                    tabCtrl.indeterminate = false;
                    tabCtrl.checkAll = true;

                } else {
                    tabCtrl.indeterminate = true;
                    tabCtrl.checkAll = false;
                }
                this.tabs[index].active = (tabCtrl.indeterminate || tabCtrl.checkAll);

                this.$emit('switch', tabLevel2Item);
                this.$forceUpdate();
            },

            onCheckAllChange(tabCtrl, tabs, index) {
                // console.log(v)
                if (tabCtrl.checkAll) {
                    tabCtrl.ndeterminate = false;
                    tabCtrl.checkAll = false;
                } else {
                    tabCtrl.checkAll = true;
                    tabCtrl.indeterminate = false;
                }

                this.tabs[index].active = (tabCtrl.indeterminate || tabCtrl.checkAll);


                tabs.forEach(v => {
                    v.active = tabCtrl.checkAll;
                    this.$emit('switch', v);
                })
            },

            showAccidentDetail(v) {
                return ($event) => {
                    // console.log(window.event)
                    const event = window.event
                    console.log(v)
                    var myAppendTo = Vue.extend(PoliceInforDetail)
                    var mo = new myAppendTo()
                    mo.data = v
                    mo.left = event.clientX - 200;
                    mo.top = event.clientY;
                    mo.$mount()
                    document.getElementById('mapInforDetailBox').appendChild(mo.$el)
                }
            },
            showTrafficSituationDetail(v) {
                return ($event) => {
                    // console.log(window.event)
                    const event = window.event
                    console.log(v)
                    var vueDom = Vue.extend(TrafficSituationDetail);
                    var mo = new vueDom()
                    mo.data = v
                    mo.left = event.clientX - 150;
                    mo.top = event.clientY;
                    mo.$mount()
                    document.getElementById('mapInforDetailBox').appendChild(mo.$el)
                }
            },
            showTollGateDetail(v) {
                return ($event) => {
                    // console.log(window.event)
                    const event = window.event
                    console.log(v)
                    var vueDom = Vue.extend(TollGateDetail);
                    var mo = new vueDom()
                    mo.data = v
                    mo.left = event.clientX - 200;
                    mo.top = event.clientY;
                    mo.$mount()
                    document.getElementById('mapInforDetailBox').appendChild(mo.$el)
                }
            },
            showStrengthDetail(v) {
                return ($event) => {
                    // console.log(window.event)
                    const event = window.event
                    console.log(v)
                    var vueDom = Vue.extend(PoliceStrengthDetail);
                    var mo = new vueDom()
                    mo.data = v;
                    mo.left = event.clientX - 150;
                    mo.top = event.clientY;
                    mo.$mount();
                    mo.trackPlayback = () => {
                        getPoliceTrack(v.thirdsyscode).then(res => {
                            if (res.isSuccess) {
                                this.coloseTrackPlayObj(tabCode.policeForces)

                                trackPlayMonitor = this.mapApp.showMonitor({
                                    strcoords: res.data[0].range,
                                    title: 'title',
                                    imgurl: require('../../assets/img/player/plice1.png'),
                                    width: 42,
                                    height: 71,
                                    infowindow: 'infowindow',
                                    centable: true,
                                    titlebgcolor: null,
                                    showtitle: false,
                                    titlecolor: null
                                });

                                this.timeLineInfor.start = res.data[0].time;
                                this.timeLineInfor.end = res.data[res.data.length - 1].time;
                                var preangle = 0;
                                this.timeLineInfor.data = res.data;
                                // console.log(this.timeLineInfor.data)
                                var srccoords = res.data.map((v) => {
                                    return v.range;
                                }).join(",");
                                // console.log(srccoords);

                                var timeLineInforTmp = this.timeLineInfor;

                                trackPlayObj = new TrackPlay(this.mapApp, trackPlayMonitor, srccoords, {
                                    smoothmove: true,
                                    showtrack: true,
                                    timeInterval: this.timeInterval,
                                    stepdistance: 0.001,
                                    callback: function (obj) {
                                        // console.log('obj');
                                        // console.log(obj);
                                        timeLineInforTmp.current = timeLineInforTmp.data[obj.currstep].time;
                                        if(trackPlayObj.END == obj.currstep){
                                            timeLineInforTmp.status = 0;
                                            timeLineInforTmp.current = timeLineInforTmp.end
                                        }

                                        // if (obj.isnode == true && typeof(obj.angle) != 'undefined') {//节点处调整车头方向
                                        //     var angle = -obj.angle;
                                        //     if (angle == preangle) {
                                        //         return;
                                        //     }
                                        //     var a = angle - preangle;
                                        //     var count = 0;
                                        //     if (a > 0) {
                                        //         for (var i = preangle; i <= angle; i = i + 0.5) {
                                        //             count++;
                                        //             (function (i, count) {
                                        //                 setTimeout(function () {
                                        //                     trackPlayObj.marker.rotate(i);
                                        //                 }, count);
                                        //             })(i, count);
                                        //
                                        //         }
                                        //     } else {
                                        //         for (var i = preangle; i >= angle; i = i - 0.5) {
                                        //             count++;
                                        //             (function (i, count) {
                                        //                 setTimeout(function () {
                                        //                     trackPlayObj.marker.rotate(i);
                                        //                 }, count);
                                        //             })(i, count);
                                        //         }
                                        //     }
                                        //     preangle = angle;
                                        //
                                        // }
                                    }
                                });

                            } else {
                                this.$message.error("查询轨迹失败！")
                            }
                        })
                    };
                    document.getElementById('mapInforDetailBox').appendChild(mo.$el)
                }
            },

            coloseTrackPlayObj(symbol) {
                console.log('trackPlayObj.clear()')
                this.level2Symbol = symbol;
                if (trackPlayObj) {
                    trackPlayObj.clear();
                }
                trackPlayMonitor = null;
                trackPlayObj = null;

                this.timeLineInfor.status = 0
            },
            playTrack() {
                // console.log(this.trackPlayObj);
                if (this.timeLineInfor.status == 0) {
                    console.log("trackPlayObj");
                    console.log(trackPlayObj);
                    trackPlayObj.start();
                    this.timeLineInfor.status = 1;
                } else {
                    trackPlayObj.proceed();
                    this.timeLineInfor.status = 1;
                }

            },
            pauseTrack() {
                trackPlayObj.pause();
                this.timeLineInfor.status = 2;
            },
            timeLineChange(v) {
                console.log('timeLineChange');
                console.log(v);


                //
                let nearestIndex = 0;
                let offset = Math.abs(this.timeLineInfor.data[0].time - v);
                console.log('offset',offset)
                this.timeLineInfor.data.forEach((v, i) => {
                    const offsetTemp = Math.abs(v.time - v);
                    if (offsetTemp < offset) {
                        offset = offsetTemp;
                        nearestIndex = i;
                    }
                });
                console.log(nearestIndex);
                trackPlayObj.jumpTo(nearestIndex);
                trackPlayObj.pause();
            }

        }, mounted() {
            // console.log(this.index)
            this.activeCode = this.index;


        }
    }
</script>

<style scoped>
    .tabFooterBox {
        position: absolute;
        bottom: 0px;
        height: 90px;
        display: flex;
        justify-content: center;
        width: 100%;
        left: 0;
    }

    .tabLevel2Box {
        background-image: url('../../assets/img/expresswayMapMode/tabLevel2Bg.png');
        width: 798px;
        height: 102px;
        position: absolute;
        top: -110px;
        padding: 28px 30px;

    }

    .haloSelecedImg {
        position: absolute;
        left: -24px;
        /*top: -20px;*/
        width: 128px;
        height: 101px;
    }

    /*checkbox*/
    >>> .ant-checkbox-wrapper, >>> .ant-radio-wrapper {
        color: #BCE2FC;
    }

    >>> .ant-checkbox-inner, >>> .ant-radio-inner {
        background-color: transparent;
        border: 1px solid #35B1F5;
        border-radius: 0;
    }

    >>> .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #0D72AC;
    }

    >>> .ant-radio-checked .ant-radio-inner {
        border: 1px solid #35B1F5;
    }

    >>> .ant-radio-inner::after {
        background-color: #35B1F5;
    }

    >>> .ant-input {
        background-color: transparent;
        border: 1px solid #5BB0EF;
        color: #BCE2FC;
    }

    >>> .ant-calendar-picker-icon {
        color: #e5f4fe;
    }

    >>> .ant-slider-rail {
        background-color: #244f84;
    }

    >>> .ant-slider-track {
        background-color: #18a5fd;
    }

</style>
